<template>
    <div class="problem-index">
      <!-- 搜索栏 -->
      <div  class="search">
        <el-button v-if="isAdmin()" @click="update" style="float: right;margin-top: 10px;margin-right: 10px;" type="primary">
<!--          添加新题目-->
          {{$t("problemMode.add")}}
        </el-button>
        <el-button v-if="isAdmin()" @click="tagFlag = true" style="float: right;margin-top: 10px;margin-right: 10px;" type="primary">
<!--          标签管理-->
          {{$t('problemMode.tags')+$t('homeMode.management')}}
        </el-button>
        <ul>
          <li>
            <el-input placeholder="请输入内容" v-model="params.key" clearable width="200">
              <el-button slot="append" icon="el-icon-search" @click="getTableData"></el-button>
            </el-input>
          </li>
          <li >
            <el-select v-model="params.tags" multiple :placeholder="$t('problemMode.tags')" @change="getTableData">
              <el-option
                v-for="item in tags"
                :key="item.id"
                :label="item.name"
                :value="item.id" >
              </el-option>
            </el-select>
          </li>
          <li style="width:80px">
            <el-select v-model="params.difficulty" :placeholder="$t('problemMode.difficulty')" @change="getTableData">
              <el-option
                v-for="item in difficulties"
                :key="item.id"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
          </li>
          <li style="width:120px" v-if="isAdmin()">
            <el-select v-model="params.auth" :placeholder="$t('problemMode.auth.index')" @change="getTableData">

              <el-option :label="$t('problemMode.auth.fir')" value="">{{ $t('problemMode.auth.fir') }}</el-option>
              <el-option :label="$t('problemMode.auth.sec')" value="0">{{ $t('problemMode.auth.sec') }}</el-option>
              <el-option :label="$t('problemMode.auth.thi')" value="1">{{ $t('problemMode.auth.thi') }}</el-option>
              <el-option :label="$t('problemMode.auth.fou')" value="2">{{ $t('problemMode.auth.fou') }}</el-option>
            </el-select>
          </li>
        </ul>




      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        :default-sort = "{prop: 'date', order: 'descending'}"
        @sort-change="sortChange" >

        <el-table-column :label="$t('problemMode.status.index')" width="70" >
          <template slot-scope="scope" >

            <div v-html="formatterStatus(scope.row)"></div>

          </template>
        </el-table-column>
        <el-table-column :label="$t('problemMode.id')" width="120" sortable="custom" prop="code">
          <template slot-scope="scope" >

            <a href="javascript:void(0)" @click="detailPush(scope.row)" >{{ $MyUtils.formatCode(scope.row.code) }}</a>

          </template>
        </el-table-column>
        <el-table-column :label="$t('problemMode.title')" sortable="custom" width="500" prop="title">
          <template slot-scope="scope" >

            <a href="javascript:void(0)" @click="detailPush(scope.row)" >{{ scope.row.title }}</a>
          </template>
        </el-table-column>
        <!-- 权限 -->
        <el-table-column v-if="isAdmin()" :label="$t('problemMode.auth.index')"
          :formatter="formatterAuth" width="120" sortable="custom" prop="auth">
        </el-table-column>
        <el-table-column :label="$t('problemMode.tags')"  >
          <template slot-scope="scope" >

            <el-tag
              v-for="tag in scope.row.tags"
              :key="tag.id"

              type="" :color="tag.color"  style="color: #ffffff">
              {{tag.name}}
            </el-tag>

          </template>
        </el-table-column>
        <!-- 困难等级 -->
        <el-table-column :label="$t('problemMode.difficulty')" sortable="custom"  width="140" prop="difficulty">
          <template slot-scope="scope" >
            <el-rate
              v-model="scope.row.difficulty"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}">
            </el-rate>

          </template>
        </el-table-column>
        <!-- 通过率 -->
        <el-table-column :label="$t('problemMode.submited')"  width="180">
          <template slot-scope="scope" >
            <el-progress :title="scope.row.submited+' / '+scope.row.submitSum" :text-inside="true" :stroke-width="20" :percentage="new Number((scope.row.submited/(scope.row.submitSum==0?1:scope.row.submitSum)*100).toFixed(2))" status="success"></el-progress>

          </template>
        </el-table-column>
        <el-table-column fixed="right" :label="$t('problemMode.operation.index')" width="220" v-if="isAdmin()" >
          <template slot-scope="scope">
            <el-link  type="warning" @click="update(scope.row)"  size="small" icon="el-icon-edit">{{ $t('problemMode.operation.update') }}</el-link>
            <!-- <el-button @click="update(scope.row)" type="warning" size="small">{{ $t('problemMode.operation.update') }}</el-button> -->
            <el-link style="margin-left: 8px;" type="danger" @click="deleteById(scope.row)" size="small" >{{ $t('problemMode.operation.delete') }}</el-link>
            <!-- <el-button  type="danger" size="small" @click="deleteById(scope.row)">{{ $t('problemMode.operation.delete') }}</el-button> -->

            <el-link style="margin-left: 8px;" @click="clickTag(scope.row)" type="success" size="small">{{ $t('problemMode.operation.tags') }}</el-link>
            <!-- <el-button @click="clickTag(scope.row)" type="success" size="small">{{ $t('problemMode.operation.tags') }}</el-button> -->
            <el-link style="margin-left: 8px;" @click="pushCase(scope.row.id)" type="primary" size="small">{{ $t('problemMode.operation.case') }}</el-link>
            <!-- <el-button @click="pushCase(scope.row.id)" type="primary" size="small">{{ $t('problemMode.operation.case') }}</el-button> -->
          </template>
        </el-table-column>
      </el-table>
        <!--分页-->
      <div class="page">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="params.size"
          :page-sizes="[10,20,30,50,100]"
          @current-change="chg"
          @size-change="chgsize"
          >
        </el-pagination>
      </div>

      <!-- 标签弹出框 -->
      <el-dialog :title="$t('select')+$t('problemMode.tags')" :visible.sync="dialogFormVisible">
        <el-checkbox-group v-model="checkTags" size="mini">
          <el-checkbox v-for="item in tags" :key="item.id" :label="item.id" border :style="'background-color: '+item.color+';color:#ffffff;'" style="margin-top: 15px;">{{ item.name }}</el-checkbox>
        </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="updateTag">{{ $t('save') }}</el-button>
      </div>
      </el-dialog>

      <!--  标签管理弹出狂-->
      <el-dialog :title="$t('problemMode.tags')" :visible.sync="tagFlag" >
        <TagList></TagList>
      </el-dialog>
    </div>
  </template>

  <script lang="ts">
  import * as problemApi from '@/api/problem'
  import { isAdmin } from '@/utils/auth';
  export default {
    name: "problemIndex",
    data() {
        return {
            tagFlag:false,
            tags:[],//所有标签
            checkTags:[], //check的
            checkPorblemId:null,  //选中的题目id
            total:0,
            params: {
                key: "",
                page: 1,
                size: 10,
                field:null,
                order:null,
                tags:[],
            },
            tableData: [],
            difficulties:[  //难度
            {id:"0",name:"不限",value:''},
            {id:"1",name:"1星",value:1},
            {id:"2",name:"2星",value:2},
            {id:"3",name:"3星",value:3},
            {id:"4",name:"4星",value:4},
            {id:"5",name:"5星",value:5}
            ],
            auths:[
              {value:'',name: this.$t('problemMode.auth.fir'),id:0},
              {value:0,name: this.$t('problemMode.auth.sec'),id:1},
              {value:1,name: this.$t('problemMode.auth.thi'),id:2},
              {value:2,name: this.$t('problemMode.auth.fou'),id:3},
            ],
            dialogFormVisible:false,  // 标签弹出框
        };
    },
    components:{
      TagList: () => import('@/components/problem/tag.vue'),
    },
    created() {
        this.getTableData();
        this.getAllTags();
    },
    methods: {
      detailPush(data){
        // 跳转题目详情
        this.$router.push({path:"/main/problem/detail/"+data.id});

      },
      // 跳转测试用例
      pushCase(id){
        this.$router.push({name:"problemCase",query:{"problemId":id}});
      },
      //展示标签弹出框
      clickTag(data){
        this.checkPorblemId = data.id;    //题目数据id
        this.checkTags =[];
        for(var i = 0;i<data.tags.length;i++){ //已存在的标签
          // console.info((data.tags)[i])
          this.checkTags.push( ((data.tags)[i]).id);
        }
        this.dialogFormVisible = true; //显示
      },
      //修改保存题目标签
      updateTag(){
        // console.info(this.checkTags)
        var tagData = []  //构造tags对象
        for(var i = 0;i<this.checkTags.length;i++){
          tagData[i] = {"id":this.checkTags[i]}
        }
        var data={"id":this.checkPorblemId,"tags":tagData}  //构造problem对象

        problemApi.updateProblem(data).then(res=>{
          if(res.data.success){
            this.$message({message:"修改成功",type:"success"});
            this.dialogFormVisible = false;
            this.getTableData();
          }
        })

      },
      //修改
      update(data){
        // console.info(this.$route);
        // this.$route.params = data;
        if(data)this.$router.push({name:"problemSave",params :data,query:{"id":data.id}});
        else this.$router.push({name:"problemSave"});

      },
      //删除题目
      deleteById(data){
        this.$confirm(this.$t('problemMode.case.deleteWarnBefore')+data.title+this.$t('problemMode.case.deleteWarnAfter'), this.$t('prompt'), {
          confirmButtonText: this.$t('save'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }).then(() => {
          problemApi.deleteProblemById({"id":data.id}).then(res=>{
            if(res.data.code==10000){
              this.$message({
                type: 'success',
                message: this.$t('delete')+this.$t('success')
              });
              this.getTableData();
            }

          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('cancel')+this.$t('delete')
          });
        });
      },
      //判断是否为管理员
      isAdmin(){
        // console.info(isAdmin())
        return isAdmin();
      },
      // 获取所有标签
      getAllTags(){
        problemApi.getTagList().then(res=>{
          this.tags = res.data.data;
        })
      },
      // 自定义排序
      sortChange(column,prop,order){
        // console.info(column);
        this.params.field = column.prop;
        this.params.order = column.order;
        if(this.params.order){
          if(this.params.order[0]=='a')this.params.order = "asc";
          else this.params.order = "desc";
        }else{  this.params.order = "";this.params.field = ''}
        // console.info(this.params)
        this.getTableData();
      },
      //每页记录数发生改变时
      chgsize(pgsize) {
        //更改每页记录数
        this.params.size = pgsize;
        //从每一页开始查询
        this.params.page = 1;
        //重新查询
        this.getTableData();
      },
      //当页数发生变化时执行
      chg(curpage) {
          //更新查询的页数
          this.params.page = curpage;
          //重新查询
          this.getTableData();
      },
      /**
       * 题目提交状态重定义输出显示
       * @param row
       */
      formatterStatus(row) {
        // console.info(row.status)
          if (row.status == -1) {return this.$t("problemMode.status.fir");}
          else if (row.status == 0) {return '<span style="color:#25bb9b;">'+this.$t("problemMode.status.sec")+'</span>';}
          else if (row.status == 1) {return '<span style="color:#ff7a38;">'+this.$t("problemMode.status.thi")+"</span>";}
      },
      formatterAuth(row){
        if(row.auth==0)return this.$t('problemMode.auth.sec');
        else if(row.auth==1)return this.$t('problemMode.auth.thi');
        else if(row.auth==2)return this.$t('problemMode.auth.fou');
        else return "NULL";
      },

      // 获取题目数据
      getTableData() {
        // console.info(this.params)
          problemApi.getListData(this.params).then(res => {
              // console.info(res);
              if(res.data.code==10000){
                this.tableData = res.data.data.dataList;
                this.total = res.data.data.total;
              }

              // console.info(this.tableData);
          });
      }
    },

}
  </script>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
.problem-index{
  width: 98%;
  /* margin-right: 20px; */
  background-color: #ffffff;
  border-radius: .1rem;
  overflow-y: auto;
  box-shadow: 2px 2px 2px 2px #afafafaf;
}
a{
  color: #000;
  text-decoration: none;
}
  .page{
      margin-top: 20px;
      /* text-align: right; */
  }
  .search > ul > li{
    list-style: none;
    display:inline-block;
    text-align: left;
    width: 15.625rem;
    margin: .625rem;
  }
  .search > ul{
    /* margin: .625rem; */
    padding: 0px;
    /* margin: 0px; */
    margin-bottom: 20px;
    text-align: left;
    /* width: 55rem; */
  }

  </style>
